<template>
  <div class="container" style="width: 800px; margin: 0 auto; ">
    <div
      class="box"  style=" font-size:18px;padding:8px;margin-top:30px;  "  >
          <h1 style="text-align:center; font-family:'楷体'">
        <span class="el-icon-edit" >&nbsp&nbsp</span>新&nbsp增&nbsp客&nbsp户
          </h1>
  
     <div class="el-input__inner">  </div>
    <div class="box1" style="height: 30px ; "></div>

    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="客户姓名" style="width: 600px">
        <el-input v-model="form.name"></el-input>
      </el-form-item>

      <el-form-item label="客户编号" style="width: 600px">
        <el-input v-model="form.customerid"></el-input>
      </el-form-item>

      <el-form-item label="手机号" style="width: 600px">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>

     <el-form-item label="次卡数量" style="width: 600px">
        <el-input v-model="form.card" style="width: 330px"> </el-input>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;默认创建时数量为0</span>
      </el-form-item>

      <el-form-item label="性别" style="width: 600px">
        <el-select v-model="form.type" placeholder="选择性别">  
          <el-option label="女" value="0"></el-option>
          <el-option label="男" value="1"></el-option>
        </el-select>
      </el-form-item>

   

      <!--  <el-form-item label="客户生日">-->
      <!--    <el-col :span="11">-->
      <!--      <el-date-picker type="date"  placeholder="选择日期" v-model="form.birthday" style="width: 100%;"></el-date-picker>-->
      <!--    </el-col>-->
      <!--  </el-form-item>-->


     <!-- <div
      class="box"
      style="
        height: 50px;
        margin: 0 auto;
        font-family: '楷体';
        text-align: center;
      "
    >
      <h1>
        <span class="el-icon-edit">&nbsp&nbsp</span>卡&nbsp信&nbsp息&nbsp
      </h1>
    </div>
     <hr />  -->

    <el-form-item label="卡号" style="width: 600px ;" >



      <el-input v-model="form.cardid" style="width: 330px ;"></el-input><span ></span>
      </el-form-item>

    <el-form-item label="卡金额" style="width: 600px ;" >
      <el-input v-model="form.money" style="width: 330px ;"></el-input><span >&nbsp;&nbsp;&nbsp;&nbsp;元</span>
      </el-form-item>

    <el-form-item label="卡种类">
    <el-select v-model="form.type" placeholder="请选择卡种类">
      <el-option label="无折扣" value="1"></el-option>
      <el-option label="8折" value="2"></el-option>
      <el-option label="7折" value="3"></el-option>
    </el-select>
    </el-form-item>


     
      <el-form-item label-width="200px" >
        <el-button style="width: 100px" type="primary" @click="onSubmit"
          >立即创建</el-button
        >
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
 </div>




</template>
<script>
import customer1 from "../../../api/customer";
export default {
  data() {
    return {
      form: {
        name: "",
        birthday: "2020/01/01",
        money: "",
        sex: "",
        customerid: "",
        type: "",
        phone: "",
        numcard: "0",
        cardid: '',
      },
    };
  },
  methods: {
    onSubmit() {
      customer1
        .addCustomer(this.form)
        .then(() => {
          this.$message({
            type: "success",
            message: "新增成功！",
          });
          this.form = {};
        })
        .catch((error) => {
          this.$message({
            type: "fault",
            message: "新增失败！",
          });
        });
    },
  },
};
</script>

<style scoped>
.el-input__inner {
	width: 100%;
	border-top-width: 0px;
	border-left-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 1px;
	/*outline: medium;*/
}
</style>
